import React, { Component } from 'react';
import {withRouter} from "react-router-dom"
import style from './details.module.css'
import Detials_swiper from './swiper/swiper.js'
import Housetype from './housetype/housetype.js'
import Introduce from './introduce/introduce.js'
import Consultant from './consultant/consultant.js'
import BasicMess from './basicMessage/basicMess'
import Dynamic from './dynamic/dynamic'
import Evaluation from './evaluation/evaluation'
import Question from './question/question'
import axios from 'axios'
import { Link } from "react-router-dom"
import {connect} from "react-redux"
// import {} from "../../redux/login/action"
import HouseList from '../../components/shoplist/list_main_List'
import { StarOutlined, CalculatorOutlined, SearchOutlined, LeftOutlined, PhoneOutlined, StarFilled} from '@ant-design/icons';
class index extends Component {
    state={
        dizhi: '',
        iscollect:false,
        // shoplist:[],
        house:{},
        likelist:[]
    }
    componentDidMount(){
        let dizhi = this.props.dizhi
       
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8"
        };
        axios({
            url:"/shop/selectone",
            method:"post",
            header:headerJSON,
            data:{
                id:this.props.location.state.id
            }
        }).then(res=>{
            this.setState({
                house:res.data.build,
            })
            // console.log(this.state.house)
        })
        axios({
            url:"/collect/hascollect ",
            method:"post",
            header:headerJSON,
            data:{
                bid:this.props.location.state.id,
                phone:12345678901  
            }
        }).then(res=>{
            console.log(res)
            if(res.data.code==='-1'){
                this.setState({
                    iscollect:true
                })
            }else{
                this.setState({
                    iscollect:false
                })
            }
        })
        axios({
            url:"/shop/selectLike",
            method:"post",
            header:headerJSON,
            data:{
                places: dizhi.name
            }
        }).then(res=>{
            this.setState({
                likelist:res.data.lists,
            })
            // console.log(res,"like")
        })
        this.setState({})
    }
    changecollect=()=>{
        this.state.iscollect=!this.state.iscollect
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8"
        };
        
        axios({
            url:"collect/addcollects",
            method:"post",
            headers: headerJSON,
            data:{
                bid:this.props.location.state.id,
                phone:12345678901
            }
        }).then(res=>{
            console.log('收藏')
            console.log(res)
            
            // console.log(this.props.location.state.id)
            // console.log(this.props.user.data.phone)
        })
        this.setState({})
        
    }
    delcollect=()=>{
        this.state.iscollect=!this.state.iscollect
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8"
        };
        
        axios({
            url:"collect/delcollect",
            method:"post",
            headers: headerJSON,
            data:{
                bid:this.props.location.state.id,
                phone:12345678901
            }
        }).then(res=>{
            console.log('取消收藏')
            console.log(res)
        })
        this.setState({})
        
    }
    render() {
        let {likelist} = this.state
        let house =this.state.house
        // console.log(this.state.house)
        // let pic=this.state.house.imgs
        // console.log(this.state.iscollect)
        let id=this.props.location.state.id
        return (
            
            <div>
               <div className={style.header}>
                   <span>{house.name}</span>
                   <span onClick={()=>{
                        this.props.history.go(-1)
                    }}><LeftOutlined /></span>
                    
                </div>
                
                <Detials_swiper pic={this.state.house.imgs}></Detials_swiper>
                <div className={style.main}>
                    <h3>{house.name}</h3>
                    <div className={style.collect}>
                        {!this.state.iscollect&&<StarOutlined  className={style.icon1}  onClick={
                        this.changecollect
                  }/>}
                  {this.state.iscollect&&<StarFilled  className={style.icon2} onClick={              
                        this.delcollect
                  }/>}收藏</div>
                    <span>安心购</span><span>旅游地产</span><span>高档小区</span><span>低密居所</span>
                    <ul className={style.price}>
                        <li>
                            <span>{house.priceLow}元/㎡</span>
                            <span>参考均价</span>
                        </li>
                        <li>
                            <span>{house.totalPriceLow}-{house.totalPriceHigh}万/套</span>
                            <span>参考总价</span>
                        </li>
                        <li>
                            <span>普通住宅</span>
                            <span>物业类型</span>
                        </li>
                    </ul>
                    <p>注：有效期至2021/07/31</p>
                    <ul className={style.query}>                        
                        <li><Link to="/computed"><span className={style.calculator}>房贷计算器</span><CalculatorOutlined className={style.icon}/></Link></li>
                        <li><span className={style.calculator}>购房资格查询</span><SearchOutlined className={style.icon}/></li>
                    </ul>
                </div>
                <BasicMess></BasicMess>
                <Housetype></Housetype>
                <Dynamic id={id}></Dynamic>
                <Evaluation id={id}></Evaluation>
                <Question></Question>
                <Introduce></Introduce>
                <Consultant></Consultant>
                <div className={style.footer}>
                    <li><span>我要看房</span><span>免费专车接送</span></li>
                    <li onClick={()=>{
                            this.props.history.push("/xiaoxi")
                        }}><span>我要咨询</span><span>24小时在线客服</span></li>
                    <li><span className={style.phone}><PhoneOutlined /></span><span>咨询热线</span></li>
                </div>
                <div className={style.houselist}>
                <p>猜你喜欢</p>
                <HouseList shoplist={likelist}></HouseList>
                </div>
            </div>
        );
    }
}

export default connect(
    state=>({
        user:state.user,
        token:state.token,
        dizhi: state.citylist
    })
)(withRouter(index))


